<template>
	<view class="container" ref='container'>
		<!-- mo-poster 使用示例 -->
		<view>
			<view class="text-center">选择线路</view>
			<view class="flex-dcs flex-center">
				<text class="mo-m-r-30 mo-p-t-20 mo-p-b-20" v-for="(item,index) in svgList" :key="index" @click="onClick(item)">{{item.name}}</text>
			</view>
		</view>
		<div class='svg-model-main'>
			<div class='no-data' v-if='!picUrl'>
				<div>
					<div class='iconfont icon-zanwushuju' style='font-size: 25px;text-align: center'></div>
					<div style='text-align: center'>未选择线路</div>
				</div>
			</div>
			<mo-poster v-else :posterPicUrl="picUrl"></mo-poster>
		</div>
	</view>
</template>

<script>
    import { testApi } from '@/api/testAPI.js'
	export default {
		components: {
		},
		data() {
			return {
				svgId: '',
				spinning: false,
				lastEmbed: '',
				svgList: [
					{name: '线路一', src: '../../static/img/svg/line1.svg'},
					{name: '线路二', src: '../../static/img/svg/line2.svg'},
					{name: '线路三', src: '../../static/img/svg/line3.svg'},
				],
				picUrl: '',
				pz: null,
				width: 100,
				height: 200,

				list:[],
				dataList: [],
				showLoadMore: false,
				LoadText: '正在加载···',
				finish: false,
				size: 25,
				page: 1
			}
		},
		onLoad() {
			this.initData();
		},
		mounted(){
			this.$nextTick(function() {
				
				// this.getSvgRef()
			})
		},
		methods: {
			getSvgRef(){
				const query = uni.createSelectorQuery().in(this)
				query.select('.container').boundingClientRect(area =>{
					if(!area) return
					console.log(60, area)
        		}).exec();
			},

			async initData(){
				this.finish = false
				this.page = 1
				await this.getList();
				this.list = this.dataList
				uni.stopPullDownRefresh();
			},
			async moreList(){
				if(this.finish||this.showLoadMore) return
				this.page ++
				await this.getList();
				this.list = this.list.concat(this.dataList)
				uni.stopPullDownRefresh();
			},
			async getList() {
				this.showLoadMore = true;
				this.LoadText = '正在加载···'
				const params = {
					test: '传入的测试数据'
				}
        		const res = await testApi(this.page, this.size, params, 1000)
				console.log('testApi',res)

        		this.dataList = res.data
				this.finish = this.checkFinish(res.data)
				if(this.finish) {
					this.LoadText = '没有更多了'
				}
				this.showLoadMore = false;
      		},
			checkFinish(data){
				return (!data.length||data.length<this.size)
			},
			onClick(item) {
				this.picUrl = item.src
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		width: 48px;
		height: 48px;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
	.container {
		font-size: 28rpx;
		background: #f8f8f8;

		// height: calc(100vh - constant(safe-area-inset-bottom));
		// height: calc(100vh - env(safe-area-inset-bottom));
		// /* #ifndef MP-WEIXIN */
		// height: calc(100vh - 44px - constant(safe-area-inset-bottom));
		// height: calc(100vh - 44px - env(safe-area-inset-bottom));
		// /*  #endif  */
	}
	.pannel{
		padding: 20rpx 0;
	}
	.svg-model-main {
		height: 70vh;

		.no-data {
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
		}

		.svg-model {
			height: 100%;
			/deep/ .ant-spin-container {
			height: 100%;
			overflow: hidden;
			}
		}
	}
</style>
